<template>
<div id="app">
  <detail-section title="房东介绍" foottext="查看房东主页">
        <div class="header-title">
            <img :src="landlordData.topScroll" alt="">
        </div>
        <div class="logo">
            <div>
                <img :src="landlordData.hotelLogo" alt="">
            </div>
            <div>
                <div>{{landlordData.hotelName}}</div>
                <span v-for="(value,i) in landlordData.hotelTags" :key="i">
                {{value.tagText.text}}
                </span>
            </div>
            <div>
                <van-button style="height:25px;" type="danger">联系</van-button>
            </div>
        </div>
  </detail-section>
</div>
</template>

<script setup>
import detailSection from './detail-section.vue'
defineProps({
    landlordData:{
        type:Object,
        default:()=>({})
    }
})
</script>
 
<style lang="less" scoped>
#app{
    .header-title{
        img{
            width: 100%;
            height: 30px;
        }
    }
    .logo{
        margin-top: 10px;
        display: flex;
            justify-content: center;
            align-items: center;
        img{
            border-radius: 44px;
            width: 50px;
            height: 50px;
        }
        div{

            &:nth-child(2){
                width: 230px;
                margin-left: 5px;
                div{
                    &:first-child{
                        font-size: 17px;
                        overflow: hidden;
                        text-overflow: hidden;
                        white-space: nowrap;
                        width: 100px;
                    }
                }
                span{
                    font-size: 14px;
                    color: gray;
                    &::after{
                        content:"|";
                        margin:0 3px;
                    }
                    &:last-child::after{
                        content: "";
                    }
                }
            }
        }
    }
}
</style>